<style lang="scss" scoped>
.mask-content {
        max-height: 90%;
        width: 460px;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #fff;
        border-radius: 6px;
        // box-sizing: border-box;
        padding: 40px 30px 10px;
    }
    input {
        border: none;
        outline: none;
        border-bottom: 1px solid #9e9e9e;
        padding: 5px 0;
        width: 100%;

        font-size: 16px;

        &::placeholder {
            color: #9f9f9f;
        }
    }

    .form-item {
        margin-bottom: 40px;
        &:last-child {
            margin-bottom: 15px;
        }
    }
    .form-item-name {
        color: #696969;
        font-size: 13px;
        margin-bottom: 2px;
    }

    button {
        border:none;
        cursor: pointer;
        background-color: #2196f3;
        color: #fff;
        width: 100%;
        font-size: 16px;
        padding: 8px;
        border-radius: 4px;
        box-shadow: 0px 1px 2px 1px rgb(0 0 0 / 23%);
    }

    .entrance-tip {
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .entrance-social {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;

        &::before {
            content: '';
            display: block;
            position: absolute;
            height: 1px;
            background-color: #d8d8d8;
            width: 60%;
        }
        span {
            position: absolute;
            font-size: 13px;
            color: #b5b5b5;
            z-index: 10;
            background-color: #fff;
            padding: 0 10px;
        }
    }

    .social-login {
        display: flex;
        justify-content: center;
    }

    span.iconfont {
        cursor: pointer;
        margin: 0 8px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        &.icon-weibo {
            background-color: #e05244;
        }
        &.icon-qq {
            background-color: #00aaee;
        }
    }

</style>

<template>
    <div class="mask-content ">
        <div class="form-item">
            <div class="form-item-name">邮箱号</div>
            <input v-model="username" placeholder="请输入您的邮箱"/>
        </div>
        <div class="form-item">
            <div class="form-item-name">密码</div>
            <input type="password" v-model="password" placeholder="请输入您的密码"/>
        </div>
        <div class="form-item">
            <button @click="handleLogin">登录</button>
        </div>
        <div class="form-item">
            <div class="entrance-tip">
                <a href="#" @click="changeComponent('RegisterBox')">立即注册</a>
                <a href="#" @click="changeComponent('ForgetPwdBox')">忘记密码?</a>
            </div>
        </div>
        <div class="form-item">
            <div class="entrance-social">
                <span>社交账号登录</span>
            </div>
        </div>
        <div class="form-item">
            <div class="social-login">
                <span class="iconfont icon-weibo"></span>
                <span class="iconfont icon-qq" @click="jumpToQq"></span>
            </div>
        </div>
    </div>
</template>

<script>
import request from '@/utils/request.js'
import {getQQAuthUrl,getQQUserInfo  } from '@/api/loginApi'
import axios from 'axios'

export default {
    name: 'LoginBox',
    data() {
        return {
            username:'',
            password:'',
        }
    },
    methods: {
        handleLogin() {
            if(!this.username) {
                this.$toast('error','用户名不能为空')
                return
            }
            if(!this.password) {
                this.$toast('error','密码不能为空')
                return
            }
            let hh = this.$store.dispatch('user/doLogin',{username:this.username,password:this.password})
                    .then(()=>{
                        this.$store.commit('modal/closeLoginModal')
                        this.$nextTick(()=>{
                            document.body.style.position = "static";
                            document.body.style.top = "auto";
                            document.scrollingElement.scrollTop = this.$store.state.modal.scrollTop1;
                        })
                        this.$toast('success','登录成功')
                    })
        },
        changeComponent(name) {
            this.$store.commit('modal/updateComponentName',name)
        },
        jumpToQq() {
            getQQAuthUrl().then(({authUrl,state})=>{
                location.href = authUrl
                sessionStorage.setItem("state",state)
                sessionStorage.setItem(state,JSON.stringify({fullPath:this.$route.fullPath}))
            })
        }
    },
    components: {
    }
}
</script>

